<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>match display</title>
<script type="text/javascript">
function changecolor(data){
	$(data).css("backgroundColor", "#EBFFFF");
}
function outchangecolor(data){
	$(data).css("backgroundColor", "");
}
</script>
</head>
<body style="background-color: #EEEEEE">
<%@ include file="/menu.jsp" %>
 
<c:if test="${not empty beans}">
<div style="margin:0px auto;margin-top:30px;width:600px;"> 
	 <form >
	  <table>
	   <thead>
             <tr>
             <th>圖片</th>
             <th>帳號</th>
             <th>姓名</th>
             <th>綽號</th>
             <th>生日</th>
             <th>性別</th>
             <th>血型</th>
             <th>身高</th>
             <th>地區</th>
             </tr>
           </thead>
	 <c:forEach var="bean"  items="${beans}"  varStatus="status">
	   <tr onmouseover="changecolor(this); " onmouseout="outchangecolor(this);">
	   		 <td><img src="data:${beanspic[status.index]}" width="50px" height="50px"></td>
             <td align="center"><a href="<c:url value="/View/MypageServlet.controller?account=${bean.account}" />" >${bean.account}</a></td>
             <td align="center">${bean.name}</td>
             <td align="center">${bean.nickname}</td>
             <td align="center">${bean.bdate}</td>
             <td align="center">${bean.sex}</td>
             <c:choose>
  			 <c:when test="${bean.blood == 'C'}">
			 <td align="center">AB</td>
  			 </c:when>
  			 <c:otherwise>
			 <td align="center">${bean.blood}</td>
  			 </c:otherwise>
			 </c:choose>            
             <td align="center">${bean.hight}</td>
             <td align="center">${bean.region}</td>
       </tr>
	 </c:forEach>
	 </table>
	 </form>
	  <!-- 分頁 -->
	<c:url value="/View/MatchServlet.controller" var="path" scope="page">
	  <c:param name="region" value="${region}"></c:param>
	  <c:param name="sex" value="${sex}"></c:param>
	  <c:param name="constellation" value="${constellation}"></c:param>
	  <c:param name="hight" value="${hight}"></c:param>
	  <c:param name="blood" value="${blood}"></c:param>
	  <c:param name="mstate" value="${mstate}"></c:param>
	  <c:param name="play" value="${play}"></c:param>
	  <c:param name="hobby" value="${hobby}"></c:param>
	  <c:param name="page" value="${page}"></c:param>
	</c:url>	
	<div style="text-align : center">
	<c:forEach var="page" items="${pages}"  varStatus="status">
	<!--<a href="${path}">${page}</a>-->
	<a href="<c:url value="/View/MatchServlet.controller?region=${region}&sex=${sex }&constellation=${constellation }&hight=${hight }&blood=${blood }&mstate=${mstate }&play=${play }${hobby }&page=${page }" />">${page}</a> 
	<!-- <td><a href="<%= request.getRequestURI() %>">${page}</a></td>-->
	</c:forEach>
	/總共${fn:length(pages)}頁    <a href="javascript: history.go(-1); return false;">返回前頁</a></div><!-- 陣列長度 -->
	 <!-- 分頁 -->
	</div>
</c:if>
<c:if test="${empty beans}">
	<div style="margin:0px auto;margin-top:30px;width:250px;color:red">
	Sorry!目前查詢條件無符合的結果<br><br><br><br>
	<a href="javascript: history.go(-1); return false;">返回前頁</a>
	</div>
</c:if>
</body>
</html>